import React, { Component } from 'react';
import PropTypes from 'prop-types'

class Comment extends Component {

  static propTypes = {
    comment: PropTypes.object.isRequired,
    index: PropTypes.number,
    onDelete: PropTypes.func
  }

  constructor() {
    super()
    this.state = {
      timeString: ''
    }
  }

  componentWillMount () {
    this._updateTimeString()
    this._timer = setInterval(this._updateTimeString.bind(this), 5000)
  }

  componentWillUnmount() {
    clearInterval(this._timer)
  }

  _updateTimeString() {
    const { comment } = this.props
    const duration = (+Date.now() - comment.createdTime) / 1000
    this.setState({
      timeString: duration > 60
      ? `${Math.round(duration/ 60)}分前`
      : `${Math.round(Math.max(duration, 1))}秒前`
    })
  }

  _getProcessedContent (content) {
    return content
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;")
      .replace(/`([\S\s]+?)`/g, '<code>$1</code>')
  }

  _handleClickDeleteComment (index) {
     this.props.onDelete(index)
  }

  render() {
    const { index, comment } = this.props
    const { username, content } = comment
    return (
      <div className="comment">
        <div className="comment-user">
          <span>{username}</span>：
        </div>
        <p dangerouslySetInnerHTML={{__html: this._getProcessedContent(content)}}></p>
        <div className='comment-createdtime'>
          <span>
            {this.state.timeString}
          </span>
          <span className='comment-delete' onClick={this._handleClickDeleteComment.bind(this, index)}>
            删除
          </span>
        </div>
      </div>
    );
  }
}

export default Comment;
